import React, {Component} from 'react';
import MobileTopOffset from '../../../component/MobileTopOffset';
import {Input, Button, Progress} from 'antd';
import {connect} from 'dva';
import {routerRedux} from 'dva/router';
import styles from './css/ForgetPassword.css';

class Step1 extends Component {
	
	render() {
		let state = this.props.state;
		let dispatch = this.props.dispatch;
		return (
			<div className='step1'>
				<div className={'lineSpaceSmall ' + 'lineSpace ' + styles.lineSpaceSmall}>
					<h1>通过邮箱找回密码</h1>
				</div>
				<div className={'lineSpace ' + styles.lineSpace}>
					<span className={styles.hint}>
						必须使用注册时使用的邮箱作为验证
		    		</span>
				</div>
				<div className={'lineSpace ' + styles.lineSpace}>
					<Input 
					prefix={<span className={styles.preHint}>邮箱</span>} 
					value={state.email} 
					onKeyUp={(e) => {
						if(e.keyCode === 13) {
							dispatch({
								type: 'forgetPassword/stepNext'
							});
						}
					}} 
					onChange={(e) => {
						dispatch({
							type: 'forgetPassword/emailChange',
							payload: e.target.value
						});
					}}
					size='large'
					type='text' 
					placeholder='请输入注册时使用的邮箱' 
					autoFocus />
				</div>
				<div>
					<Button size='large' loading={state.loading} onClick={() => {
						dispatch({
							type: 'forgetPassword/stepNext'
						});
					}}>
						下一步
					</Button>
				</div>
			</div>
		);
	}
	
}

class Step2 extends Component {
	
	render() {
		let state = this.props.state;
		let dispatch = this.props.dispatch;
		return (
			<div className='step2'>
				<div className={'lineSpaceSmall ' + 'lineSpace ' + styles.lineSpaceSmall}>
					<h1>输入验证码</h1>
				</div>
				<div className={'lineSpace ' + styles.lineSpace}>
					<span className={styles.hint}>
						请输入你邮箱中收到的验证码
		    		</span>
				</div>
				<div className={'lineSpace ' + styles.lineSpace}>
					<Input 
					prefix={<span className={styles.preHint}>验证码</span>} 
					value={state.random}
					onChange={(e) => {
						dispatch({
							type: 'forgetPassword/randomChange',
							payload: e.target.value
						});
					}} 
					onKeyUp={(e) => {
						if(e.keyCode === 13) {
							dispatch({
								type: 'forgetPassword/stepNext'
							});
						}
					}} 
					size='large'
					type='text' 
					placeholder='此处输入验证码' 
					autoFocus />
				</div>
				<div>
					<Button size='large' loading={state.loading} onClick={() => {
						dispatch({
							type: 'forgetPassword/stepNext'
						});
					}}>
						下一步
					</Button>
				</div>
			</div>
		);
	}
	
}

class Step3 extends Component {
	
	render() {
		let state = this.props.state;
		let dispatch = this.props.dispatch;
		return (
			<div className='step3'>
				<div className={'lineSpaceSmall ' + 'lineSpace ' + styles.lineSpaceSmall}>
					<h1>重置密码</h1>
				</div>
				<div className={'lineSpace ' + styles.lineSpace}>
					<span className={styles.hint}>
						最后一步,开启新的密码吧!
		    		</span>
				</div>
				<div className={'lineSpace ' + styles.lineSpace}>
					<Input 
					prefix={<span className={styles.preHint}>密码</span>} 
					value={state.password}
					onChange={(e) => {
						dispatch({
							type: 'forgetPassword/passwordChange',
							payload: e.target.value
						});
					}} 
					onKeyUp={(e) => {
						if(e.keyCode === 13) {
							dispatch({
								type: 'forgetPassword/stepNext'
							});
						}
					}} 
					size='large'
					type='password' 
					placeholder='请输入新密码' 
					autoFocus />
				</div>
				<div>
					<Button type='primary' size='large' loading={state.loading} onClick={() => {
						dispatch({
							type: 'forgetPassword/stepNext'
						});
					}}>
						重置
					</Button>
				</div>
			</div>
		);
	}
	
}

class ForgetPassword extends Component {
	
	render() {
		let {state, dispatch} = this.props;
		let percent = state.step / 3 * 100;
		let stepRectNode;
		switch (state.step){
			case 1:
				stepRectNode = <Step1 state={state} dispatch={dispatch} />;
				break;
			case 2:
				stepRectNode = <Step2 state={state} dispatch={dispatch} />;
				break;
			case 3:
				stepRectNode = <Step3 state={state} dispatch={dispatch} />;
				break;
		}
		return(
			<div>
				<MobileTopOffset />
				<div className='forgetPasswordContainer'>
					<div className=''>
						<Progress percent={percent} showInfo={false} strokeWidth={5} />
					</div>
					<span className='back' onClick={() => dispatch(routerRedux.goBack())}></span>
					<div className={'container ' + styles.container}>
						{stepRectNode}
					</div>
				</div>
			</div>
		)
	}
	
	componentDidMount() {
		this.props.dispatch({type: 'forgetPassword/reset'});
	}
	
}

export default connect((state) => ({
	state: {
		...state.forgetPassword,
		loading: state.loading.models.forgetPassword
	}
}))(ForgetPassword);